
<template>
  <div class="sign-content">
    <template v-if="isFooter">
      <div v-if="!filterSelection"
           class="warn-message-box">
        <i class="el-icon-warning warn-icon" />
        <span>{{ content }}</span>
      </div>
      <el-tooltip v-if="filterSelection"
                  class="item"
                  popper-class="testTooltip"
                  effect="light"
                  :content="filterSelection"
                  placement="top">
        <div class="tooltip-box">
          <i class="el-icon-warning warn-icon" />
          <div v-if="filterSelection">
            <div class="code-item">
              <div>所选编号，</div>
              <div class="code-color">{{ `${filterSelection}${isFilterSelectionLength ? "..." : ""}` }}</div>
            </div>
            <div class="keep">未到达目的地,确认批量签收吗？</div>
          </div>
        </div>
      </el-tooltip>
    </template>
    <template v-else>
      <span v-if="!stopLoop"
            class="warning-item">
        <img class="execute-gif"
             :src="executeGif">
        {{ progressContent }}
      </span>
      <span v-if="stopLoop"
            class="warning-item">
        <img class="warning-img"
             :src="warning">
        {{ tipContent }}
      </span>
    </template>
  </div>
</template>

<script>
import executeGif from '@/static/images/execute.gif'
import warning from '@/static/images/warning.png'

const REACH_DESTINATION_STATE = {
  trackType: [1, 3],
  transportStatus: [1, 2]
};

export default {
  name: 'SignContent',
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    isFooter: {
      type: Boolean,
      default: null
    },
    stopLoop: {
      type: Boolean,
      default: null
    },
    selection: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      content: '确定签收订单吗？',
      executeGif,
      warning
    }
  },
  computed: {
    selectionLength () {
      return this.selection?.length || 0
    },
    progressContent () {
      const { totalNum, finishedNum, unfinishedNum } = this.value
      return `批量签收共${totalNum || this.selectionLength}单，已处理${finishedNum || 0}单，剩余${unfinishedNum || this.selectionLength}单`
    },
    tipContent () {
      return `正在进行签收批量操作，离开页面后，批量操作结果可点击导航栏-任务中心图标查看。`
    },
    forSubDestination () {
      return obj => {
        for (let field in REACH_DESTINATION_STATE) {
          if (!REACH_DESTINATION_STATE.hasOwnProperty(field)) continue;
          if (!REACH_DESTINATION_STATE[field].includes(obj[field])) return false;
        }
        return true;
      }
    },
    filterSelection () {
      return this.selection
        .filter(this.forSubDestination)
        .map(({ contractNo }) => contractNo)
        .join(', ');
    },
    isFilterSelectionLength () {
      return this.filterSelection.length >= 37
    }
  }
}
</script>

<style>
.testTooltip {
  max-width: 400px;
  line-height: 18px;
  padding: 7px;
  color: #333;
}
</style>
<style lang="scss" scoped>
.warn-message-box {
  display: flex;
  align-items: center;
}
.warn-icon {
  font-size: 24px;
  /* height: 24px; */
  color: #e6a23c;
  padding-right: 12px;
}
.keep {
  padding-top: 5px;
}
.tooltip-box {
  display: flex;
  align-items: center;
}
.code-item {
  display: flex;
}
.code-color {
  color: #eb662b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 280px;
  /* display: block; */
}
.warning-item {
  line-height: 20px;
  display: flex;
  align-items: center;
}
.warning-item .warning-img {
  width: 48px;
  height: 48px;
  /* font-size: 50px; */
  color: #e6a23c;
  padding-right: 20px;
}

.execute-gif {
  width: 48px;
  height: 48px;
  padding-right: 15px;
}
</style>